<template>
    <div class="category-management">
        <!-- Search Form -->
        <el-form>
            <el-row :gutter="20" class="mb-4">
                <el-col :span="6">
                    <el-form-item label="目录">
                        <el-input v-model="filters.name" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="18" class="text-right">
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button type="primary" @click="handleAddFirst">一级目录新增</el-button>
                    <el-button type="primary" @click="handleAddSecond">二级目录新增</el-button>
                </el-col>
            </el-row>
        </el-form>

        <!-- Table -->
        <el-table :data="tableData" style="width: 100%" row-key="id" lazy>
            <!-- <el-table-column prop="id" label="序号" width="70" /> -->
            <el-table-column prop="name" label="目录" />
            <el-table-column label="操作" width="150" fixed="right">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleEdit(scope.row)" :disabled="user.status == 2">
                        修改
                    </el-button>
                    <el-button link type="danger" size="small" @click="handleDelete(scope.row)" :disabled="user.status == 2">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- Pagination -->

        <el-dialog v-model="dialogVisibleF" title="一级目录新增" width="50%">
            <el-form :model="form" label-width="120px">
                <el-form-item label="一级目录">
                    <el-input v-model="form.firstLevel" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisibleF = false">取消</el-button>
                    <el-button type="primary" @click="submitFormF">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisibleS" title="二级目录新增" width="50%">
            <el-form :model="form" label-width="120px">
                <el-form-item label="一级目录">
                    <!-- <el-input v-model="form.firstLevel" /> -->
                    <el-select v-model="form.pid" filterable remote reserve-keyword placeholder="Please enter a keyword"
                        :remote-method="remoteMethod" :loading="loading" style="width: 240px">
                        <el-option v-for="item in optionsF" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="二级目录">
                    <el-input v-model="form.secondLevel" :disabled="form.pid == ''" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisibleS = false">取消</el-button>
                    <el-button type="primary" @click="submitFormS">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisibleU" title="修改目录" width="50%">
            <el-form :model="form" label-width="120px">
                <el-form-item label="目录名称">
                    <el-input v-model="updateForm.name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisibleU = false">取消</el-button>
                    <el-button type="primary" @click="submitFormUpdate">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { searchLevel, getLevelFirst, addLevel, updateLevel, delLevel } from '@/utils/category';

// Data
const filters = ref({
    name: '',
})
const user = ref(localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {})
const dialogVisibleS = ref(false)
const dialogVisibleF = ref(false)
const dialogVisibleU = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(400)
const loading = ref(false)
const optionsF = ref([])

const updateForm = ref({
    id: '',
    name: ''
})

const form = ref({
    firstLevel: '',
    secondLevel: '',
    pid: ''
})

const tableData = ref([])

onMounted(() => {
    search()
})

// Computed
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// Methods
const search = () => {
    searchLevel(filters.value).then(res => {
        if (res.code == 200) {
            tableData.value = res.data
            total.value = res.data.total
        } else {
            ElMessage.error(res.message)
        }
    })
}

const handleQuery = () => {
    search()
}

const submitFormF = () => {
    addLevel({ pid: 1, name: form.value.firstLevel }).then(res => {
        dialogVisibleF.value = false
        search()
    })
}

const submitFormS = () => {
    addLevel({ pid: form.value.pid, name: form.value.secondLevel }).then(res => {
        dialogVisibleS.value = false
        search()
    })
}

const submitFormUpdate = () => {
    updateLevel(updateForm.value).then(res => {
        dialogVisibleU.value = false
        search()
    })
}

const handleAddFirst = () => {
    form.value.firstLevel = ''
    dialogVisibleF.value = true
}

const handleAddSecond = () => {
    form.value.firstLevel = ''
    form.value.secondLevel = ''
    form.value.pid = ''
    dialogVisibleS.value = true
}

const handleEdit = (row) => {
    dialogVisibleU.value = true
    updateForm.value.id = row.id
    updateForm.value.name = row.name
}

const handleDelete = (row) => {
    ElMessageBox.confirm(
        '确认删除该记录吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delLevel(row.id).then(res => {
                if (res.code == 200) {
                    search()
                    ElMessage.success(`删除记录: ${row.name}`)
                }
            })
        })
        .catch(() => {
            ElMessage.info('已取消删除')
        })
}

const handleSizeChange = (val) => {
    pageSize.value = val
    search()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    search()
}

const remoteMethod = (query) => {
    console.log(query);

    loading.value = true
    setTimeout(() => {
        loading.value = false
        getLevelFirst({ firstLevel: query }).then(res => {
            if (res.code == 200) {
                optionsF.value = res.data
            } else {
                ElMessage.error(res.message)
            }
        })
    }, 200)
}
</script>

<style scoped>
.el-pagination {
    float: right;
}
</style>